<!--
 * @Description: 医学大屏
 * @Version: 1.0
 * @Author: WangBo
 * @Date: 2024-10-09 22:48:59
 * @LastEditors: WangBo
 * @LastEditTime: 2024-10-11 22:41:40
-->
<template>
	<div class="screen-container">
		<div class="screen">
			<div class="main-box-wrap left-main-box-wrap">
				<!-- 渐变标题的话   使用定位 -->
				<dv-border-box-11 :titleWidth="300" title="肝影智识智能分析系统" :color="[state.borderMainColor, '#040633']" backgroundColor="#04063388">
					<div class="form-area-wrap">
						<FormSubmitCom @initChart="initChart" @resetInitChart="resetInitChart" />
					</div>
				</dv-border-box-11>
			</div>

			<div class="main-box-wrap right-main-box-wrap">
				<dv-border-box8 :dur="13" :color="[state.borderMainColor, state.borderOtherColor]">
					<div dv-bg class="right-main-box-grid">
						<!-- 按钮 -->
						<dv-border-box-13 :color="[state.borderMainColor, state.borderOtherColor]">
							<div class="item item1">
								<div class="card-tab" :class="{ activeCard: state.activeCard == item.label }" v-for="item in cardList" @click="state.activeCard = item.label">
									<svg-icon class="svg-class" :icon-class="item.icon" class-name="icon" />
									<span class="label">{{ item.label }}</span>
								</div>
							</div>
						</dv-border-box-13>

						<!-- 淋巴结相关重要指标识别 -->
						<dv-border-box-1 :color="[state.borderMainColor, state.borderOtherColor]" class="datav-item" backgroundColor="#04063388">
							<div class="item item2">
								<div class="caption-wrap">
									<div class="caption">淋巴结相关重要指标识别</div>
									<div class="btn" v-if="state.isAi">
										<el-popover popper-class="custom-popover-bg" :visible="state.rightForm1.scoreVisible" placement="bottom" :width="300" trigger="click">
											<template #reference>
												<dv-button :bg="false" fontColor="#98E9E7" color="#278DC8" :fontSize="16" @click="state.rightForm1.scoreVisible = true">评分</dv-button>
											</template>
											<div class="score-box-wrap">
												<div>
													<el-input v-model="state.rightForm1.score" placeholder="评分" />
												</div>
												<div>
													<el-input v-model="state.rightForm1.remark" placeholder="修正备注" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" />
												</div>
												<div class="score-box-btn">
													<el-button class="submit-btn-class" icon="Check" @click="handleTijiao('rightForm1')">提交</el-button>
												</div>
											</div>
										</el-popover>
									</div>
									<div class="desc" v-if="state.rightForm1.show">
										<el-tooltip popper-class="tooltip-box-item" class="tooltip-box-item" effect="dark" placement="left-start">
											<dv-decoration-9 :color="[state.borderMainColor, state.borderOtherColor]" style="width: 130px; height: 130px">
												<div class="desc-content">{{ state.rightForm1.score || "-" }}</div>
											</dv-decoration-9>
											<template #content>
												<div class="tooltip-text">修改备注：{{ state.rightForm1.remark || "-" }}</div>
											</template>
										</el-tooltip>
									</div>
								</div>
								<div class="table-box" v-if="state.isAi">
									<div class="table-item">
										<el-table :data="state.table1">
											<el-table-column align="center" type="index" label="组号" width="50" />
											<el-table-column align="center" prop="date" label="风险提示">
												<template #default="scope">
													<el-tag effect="dark" :type="scope.row.date.indexOf('高') ? 'danger' : scope.row.date.indexOf('中') ? 'warning' : 'success'" disable-transitions>{{ scope.row.date }}</el-tag>
												</template>
											</el-table-column>
											<el-table-column align="center" prop="name" width="100" label="癌转移预测" />
											<el-table-column align="center" prop="address" label="最大径" />
											<el-table-column align="center" prop="position" width="100" label="位置" />
										</el-table>
									</div>
									<div class="table-item">
										<el-table :data="state.table2">
											<el-table-column align="center" type="index" label="组号" width="50" />
											<el-table-column align="center" prop="date" label="风险提示">
												<template #default="scope">
													<el-tag effect="dark" :type="scope.row.date.indexOf('高') ? 'danger' : scope.row.date.indexOf('中') ? 'warning' : 'success'" disable-transitions>{{ scope.row.date }}</el-tag>
												</template>
											</el-table-column>
											<el-table-column align="center" prop="name" width="100" label="癌转移预测" />
											<el-table-column align="center" prop="address" label="最大径" />
											<el-table-column align="center" prop="position" width="100" label="位置" />
										</el-table>
									</div>
								</div>
							</div>
						</dv-border-box-1>

						<!-- 影像-病理组学联合分析 -->
						<dv-border-box-1 :color="[state.borderMainColor, state.borderOtherColor]" class="datav-item" backgroundColor="#04063385">
							<div class="item item3">
								<div class="caption-wrap">
									<div class="caption">影像-病理组学联合分析</div>
									<div class="btn" v-if="state.isAi">
										<el-popover popper-class="custom-popover-bg" :visible="state.rightForm2.scoreVisible" placement="bottom" :width="300" trigger="click">
											<template #reference>
												<dv-button :bg="false" fontColor="#98E9E7" color="#278DC8" :fontSize="16" @click="state.rightForm2.scoreVisible = true">评分</dv-button>
											</template>
											<div class="score-box-wrap">
												<div>
													<el-input v-model="state.rightForm2.score" placeholder="评分" />
												</div>
												<div>
													<el-input v-model="state.rightForm2.remark" placeholder="修正备注" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" />
												</div>
												<div class="score-box-btn">
													<el-button class="submit-btn-class" icon="Check" @click="handleTijiao('rightForm2')">提交</el-button>
												</div>
											</div>
										</el-popover>
									</div>
									<div class="desc" v-if="state.rightForm2.show">
										<el-tooltip popper-class="tooltip-box-item" class="tooltip-box-item" effect="dark" placement="left-start">
											<dv-decoration-9 :color="[state.borderMainColor, state.borderOtherColor]" style="width: 130px; height: 130px">
												<div class="desc-content">{{ state.rightForm2.score || "-" }}</div>
											</dv-decoration-9>
											<template #content>
												<div class="tooltip-text">修改备注：{{ state.rightForm2.remark || "-" }}</div>
											</template>
										</el-tooltip>
									</div>
								</div>
								<div class="chart-box" v-if="state.isAi">
									<!-- 可以不要  直接画图 -->
									<!-- <div class="top-title"></div> -->
									<div class="chart-item">
										<div class="myChart" id="barChart"></div>
									</div>
									<div class="chart-item chart-item-2">
										<div class="chart-item-wrap">
											<dv-active-ring-chart :config="conf" style="width: 300px; height: 300px" :isDigitalFlop="false" />
										</div>
									</div>
									<div class="chart-item">
										<div class="myChart" id="lineChart"></div>
									</div>
								</div>
							</div>
						</dv-border-box-1>

						<!-- CT分期对比 -->
						<dv-border-box-1 :color="[state.borderMainColor, state.borderOtherColor]" class="datav-item" backgroundColor="#04063393">
							<div class="item item4">
								<div class="caption-wrap">
									<div class="caption">CT分期对比</div>
									<div class="btn" v-if="state.isAi">
										<el-popover popper-class="custom-popover-bg" :visible="state.rightForm3.scoreVisible" placement="bottom" :width="300" trigger="click">
											<template #reference>
												<dv-button :bg="false" fontColor="#98E9E7" color="#278DC8" :fontSize="16" @click="state.rightForm3.scoreVisible = true">评分</dv-button>
											</template>
											<div class="score-box-wrap">
												<div>
													<el-input v-model="state.rightForm3.score" placeholder="评分" />
												</div>
												<div>
													<el-input v-model="state.rightForm3.remark" placeholder="修正备注" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" />
												</div>
												<div class="score-box-btn">
													<el-button class="submit-btn-class" icon="Check" @click="handleTijiao('rightForm3')">提交</el-button>
												</div>
											</div>
										</el-popover>
									</div>
									<div class="desc" v-if="state.rightForm3.show">
										<el-tooltip popper-class="tooltip-box-item" class="tooltip-box-item" effect="dark" placement="left-start">
											<dv-decoration-9 :color="[state.borderMainColor, state.borderOtherColor]" style="width: 130px; height: 130px">
												<div class="desc-content">{{ state.rightForm3.score || "-" }}</div>
											</dv-decoration-9>
											<template #content>
												<div class="tooltip-text">修改备注：{{ state.rightForm3.remark || "-" }}</div>
											</template>
										</el-tooltip>
									</div>
								</div>

								<div class="image-box" v-if="state.isAi">
									<div class="left-image image-item">
										<div class="t">
											<div class="image">
												<el-image :src="state.right1ImgSrc" v-if="state.right1ImgSrc" style="width: 100%; height: 100%" />
											</div>
											<div class="text">
												<div class="h1">动脉期参数指标</div>
												<span v-for="(item, key, index) in state.constant.rightImage1">
													<span class="label">{{ key }}:</span>
													<span class="value" v-html="item"> </span>
												</span>
											</div>
										</div>
										<div class="b">
											<span class="item-span" v-for="(item, key, index) in state.constant.rightBottomTable1">
												<span class="key" :style="{ 'text-align': index < 2 ? 'center' : 'left', width: index < 2 ? '100%' : '', color: index < 2 ? '#0acffe' : '' }">{{ key }}</span>
												<span class="value" :style="{ color: item.indexOf('中') > -1 ? '#e6a23c;' : item.indexOf('高') > -1 ? 'red' : '#fff' }" v-html="item"> </span>
											</span>
										</div>
									</div>
									<div class="right-image image-item">
										<div class="t">
											<div class="image">
												<el-image :src="state.right2ImgSrc" v-if="state.right2ImgSrc" style="width: 100%; height: 100%" />
											</div>
											<div class="text">
												<div class="h1">静脉期参数指标</div>
												<span v-for="(item, key, index) in state.constant.rightImage2">
													<span class="label">{{ key }}:</span>
													<span class="value" v-html="item"> </span>
												</span>
											</div>
										</div>
										<div class="b">
											<span class="item-span" v-for="(item, key, index) in state.constant.rightBottomTable2">
												<span class="key" :style="{ 'text-align': index < 2 ? 'center' : 'left', width: index < 2 ? '100%' : '', color: index < 2 ? '#0acffe' : '' }">{{ key }}</span>
												<span class="value" :style="{ color: item.indexOf('中') > -1 ? '#e6a23c;' : item.indexOf('高') > -1 ? 'red' : '#fff' }" v-html="item"> </span>
											</span>
										</div>
									</div>
								</div>
							</div>
						</dv-border-box-1>
					</div>
				</dv-border-box8>
			</div>
		</div>
	</div>
</template>
<script setup>
import { onMounted, reactive, provide } from "vue";
import { ElLoading } from "element-plus";
import * as echarts from "echarts";
import { cardList, tagBtn } from "./variable";
import FormSubmitCom from "./components/formSubmit.vue";
import { ElMessage } from "element-plus";

const CONSTANT = inject("CONSTANT");
const state = reactive({
	resetAITest: false,
	coreVisible1: false,
	specil: true,
	borderMainColor: "#1680B5",
	borderOtherColor: "#59B3FF",
	constant: CONSTANT,
	uploadTrue: false,
	isAi: false,
	isResultAi: false,
	acticveTag: "影像",
	activeCard: "肝脏",
	userDetail: {
		姓名: "XXX",
		性别: "男",
		年龄: 43,
		入院时间: "2024-10-1",
		科室: "肝胆外科",
		主治医师: "XXX",
	},
	form: {
		name1: "",
		name2: "",
		name3: "",
		name4: "",
		name5: "",
		name6: "",
		name7: "",
		name8: "",
		name9: "",
		name10: "",
		name11: "",
		name12: "",
		imgUrl: "",
		fileUrl: "",
	},

	uploadedImageUrl: "",
	uploadedVideoUrl: "",

	table1: [],
	table2: [],

	right1ImgSrc: "",
	right2ImgSrc: "",

	rightForm1: {
		score: undefined,
		remark: "",
		show: false,
		scoreVisible: false,
	},
	rightForm2: {
		score: undefined,
		remark: "",
		show: false,
	},
	rightForm3: {
		score: undefined,
		remark: "",
		show: false,
	},
});

provide("mainState", state);

onMounted(() => {});
defineExpose({ state });

const dataSet = reactive({
	chartBarData: [],
	chartLineData: [],
});

const handleTijiao = (param) => {
	state[param].scoreVisible = false;
	state[param].show = true;
	ElMessage({
		message: "提交成功",
		type: "success",
	});
	if (state.rightForm1.show && state.rightForm2.show && state.rightForm3.show) {
		state.resetAITest = true;
	}
};
const initChart = () => {
	dataSet.chartBarData = [0.22, 0.28, 0.49, 0.33, 0.69, 0.73, 0.81, 0.62, 0.72];
	dataSet.chartLineData = [0.62, 0.74, 0.86, 0.7, 0.81, 0.78, 0.84, 0.79, 0.8];
	conf.data = [
		{ value: 58, name: "大胆管型" },
		{ value: 17, name: "小胆管型" },
		{ value: 25, name: "其他特殊" },
	];
	chartBar();
	chartLine();
};

const resetInitChart = () => {
	dataSet.chartBarData = [0.72, 0.68, 0.69, 0.83, 0.89, 0.9, 0.91, 0.72, 0.79];
	dataSet.chartLineData = [0.82, 0.91, 0.87, 0.84, 0.92, 0.78, 0.85, 0.88, 0.91];
	conf.data = [
		{ value: 70, name: "大胆管型" },
		{ value: 23, name: "小胆管型" },
		{ value: 7, name: "其他特殊" },
	];

	chartBar();
	chartLine();
};

const chartBar = () => {
	var chartDom = document.getElementById("barChart");
	var myChart = echarts.init(chartDom);
	var option;
	// prettier-ignore
	let dataAxis = []
	// prettier-ignore
	let data = []
	let yMax = 500;
	let dataShadow = [];
	for (let i = 0; i < data.length; i++) {
		dataShadow.push(yMax);
	}
	option = {
		title: {
			text: "相关度(0~1)",
			textStyle: {
				fontSize: 12,
				color: "#fff",
			},
			top: 5,
		},
		grid: {
			top: 5,
			left: 5,
			right: 5,
			bottom: 5,
		},
		xAxis: {
			data: dataAxis,
			axisLabel: {
				inside: true,
				color: "#fff",
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			z: 10,
			data: ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9"],
		},
		yAxis: {
			name: "相关度(0~1)",
			nameLocation: "start",
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: "#999",
			},
		},

		series: [
			{
				type: "bar",
				showBackground: true,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#83bff6" },
						{ offset: 0.5, color: "#188df0" },
						{ offset: 1, color: "#188df0" },
					]),
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: "#2378f7" },
							{ offset: 0.7, color: "#2378f7" },
							{ offset: 1, color: "#83bff6" },
						]),
					},
				},
				label: {
					show: true,
					position: "top",
					color: "#fff",
				},
				data: dataSet.chartBarData,
			},
		],
	};
	option && myChart.setOption(option);
};
const chartLine = () => {
	var chartDom = document.getElementById("lineChart");
	var myChart = echarts.init(chartDom);
	var option;
	option = {
		color: [
			"#1EAAFE", // 初始颜色
			"#1CA0F0", // 略微变深
			"#1996E1", // 继续变深
			"#178DD3", // 颜色变得更冷一些
			"#127CB8", // 渐进降低亮度
			"#0D6D9F", // 更深的颜色
		],
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
			},
			backgroundColor: "rgba(0, 0, 0, 0.6)", // 背景颜色半透明
			borderColor: "#1EAAFE", // 边框颜色蓝色
			borderWidth: 2, // 边框宽度
			textStyle: {
				color: "#fff", // 文字颜色白色
			},
		},
		grid: {
			top: 5,
			left: 5,
			right: 20,
			bottom: 20,
		},
		legend: {
			show: false,
		},

		xAxis: [
			{
				type: "category",
				boundaryGap: false,
				data: ["b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9"],
				axisLine: {
					show: true,
					lineStyle: {
						// type: "dashed", // 将x轴线设置为虚线
						color: "#ccc",
						opacity: 0.3,
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: "dashed", // y轴分割线类型
						color: "#ccc",
						opacity: 0.3,
					},
				},
			},
		],
		yAxis: [
			{
				type: "value",
				axisLabel: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						// type: "dashed", // 将x轴线设置为虚线
						color: "#ccc",
						opacity: 0.3,
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: "dashed", // y轴分割线类型
						color: "#ccc",
						opacity: 0.3,
					},
				},
			},
		],
		series: [
			{
				name: "相关度(0~1)",
				type: "line",
				stack: "Total",
				smooth: true,
				symbolSize: 8,

				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(24,141,240,0.8)",
						},
						{
							offset: 1,
							color: "rgba(24,141,240,0.4)",
						},
					]),
				},
				emphasis: {
					focus: "series",
				},
				data: dataSet.chartLineData,
			},
		],
	};
	option && myChart.setOption(option);
};

const conf = reactive({
	lineWidth: 24,
	digitalFlopStyle: {
		fill: "#1680B5",
	},
	color: [
		"#1EAAFE", // 初始颜色
		"#178DD3", // 颜色变得更冷一些
		"#127CB8", // 渐进降低亮度
	],
	data: [],
	numToFixed: 2,
});
</script>
<style>
.custom-popover-bg {
	border: 1px solid #58b1fc !important;
	/* 修改为你想要的颜色 */
	background-color: #020d2d !important;
	/* 修改为你想要的颜色 */
}

.custom-popover-bg .el-popper__arrow::before {
	border-color: #58b1fc !important;
	background: #020d2d !important;
	/* 修改为你想要的颜色 */
}

.custom-popover-bg .submit-btn-class {
	background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.custom-popover-bg .submit-btn-class:hover {
	color: #fff;
	background: linear-gradient(to right, #0acffe 0%, #495aff 70%);
}

.score-box-wrap .el-input__wrapper {
	background-color: transparent !important;
}

.score-box-wrap .el-textarea__inner {
	background: transparent !important;
}

.tooltip-box-item .tooltip-text {
	font-size: 16px;
}

.el-popper.tooltip-box-item {
	background-color: #f00 !important;
	/* Tooltip背景颜色 */
}

.el-popper.tooltip-box-item .el-popper__arrow::before {
	background-color: #ff000096 !important;
	/* Tooltip背景颜色 */
}

.table-box .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
	color: #fff !important;
	border-top: 1px solid #fff !important;
}
</style>
<style lang="scss" scoped>
@import "./el.scss";

.screen-container {
	width: 100dvw;
	height: 100vh;
	overflow: hidden;
	background-color: #080c33;
	padding: 0 20px;
	color: #94d0eb;
	background: url("../../assets/images/new-bak.gif") no-repeat 0 0;
	background-size: 100% 100%;
	// background: url("../../assets/images/back.png") no-repeat 0 0;
	// background-size: cover;
}

.screen {
	width: 100%;
	height: 100%;
	// background-size: 40%;
	// background: url("../../assets/images/center-back.png") no-repeat 50% 50%;
	// animation: back-animation 8s linear 0s infinite forwards alternate;

	.main-box-wrap {
		height: 100%;
	}

	.left-main-box-wrap {
		width: 42%;
		float: left;
		padding: 4px;
		padding-top: 0;
	}

	.right-main-box-wrap {
		width: 58%;
		float: right;
		padding: 10px;
	}
}

@keyframes back-animation {
	0% {
		background-size: 42%;
		background-position: 46% 46%;
	}

	100% {
		background-size: 48%;
		background-position: 53% 53%;
	}
}

.left-main-box-wrap {
	float: left;
}

.right-main-box-grid {
	display: grid;
	grid-template-rows: 1fr 2.3fr 2.5fr 3.5fr;
	padding: 15px;
	box-sizing: border-box;
	height: 100%;

	.datav-item {
		overflow: hidden;
	}

	.item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 15px;

		.caption-wrap {
			display: flex;
			align-items: center;
			gap: 10px;
			position: relative;
			top: -21px;
			left: 74px;
		}

		.desc {
			position: absolute;
			top: 0;
			right: 60px;
			z-index: 1000;
			cursor: pointer;

			.desc-content {
				font-size: 28px;
				letter-spacing: 1px;
				background: #020d2d90;
				color: #59b3ff;
			}
		}

		.caption {
			height: 30px;
			line-height: 30px;
			color: red;
			font-weight: bolder;
			font-size: 20px;
			text-align: left;
			color: transparent;
			font-family: AlibabaPuHuiTi-2-85-Bold;
			background: linear-gradient(to bottom right, #11cbe4, #ffffff 70%, #15bc98);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.title {
			.score-box {
				float: right;
				color: #fff;
				font-size: 12px;
				-webkit-text-fill-color: initial !important;
			}
		}
	}

	.item1 {
		// background-color: salmon;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 19px 16px 16px 16px;
		box-sizing: border-box;

		.card-tab {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #fff;

			&.activeCard {
				background-image: linear-gradient(to right, #0acffe 0%, #495aff 70%);
				border-width: 2px;
				/* 边框样式 */
				border-style: solid;
				border-color: transparent;
				/* 渐变边框 不能和border-radius同时使用 */
				// border-image: linear-gradient(to right, #3d05be, #607de7da) 1;
				border-radius: 10px;
			}

			.label {
				margin-top: 2px;
			}
		}
	}

	.item2 {
		// background-color: white;
		display: flex;
		flex-direction: column;

		.table-box {
			width: 100%;
			flex: 1;
			display: flex;
			overflow: auto;

			.table-item {
				flex: 1;
				padding: 0 20px;
				display: flex;
				overflow: auto;
			}
		}
	}

	.item3 {
		display: flex;
		flex-direction: column;

		.chart-box {
			flex: 1;
			display: flex;
			flex-direction: row;

			height: 100%;
			margin-top: -14px;

			.chart-item {
				flex: 1;
				width: 100%;
				position: relative;
				display: flex;

				.myChart {
					width: 100%;
				}
			}

			.chart-item-2 {
				max-width: 280px;
				pointer-events: none;
			}

			.chart-item-wrap {
				position: absolute;
				left: 0;
				top: -77px;
			}
		}
	}

	.item4 {
		// background-color: firebrick;
		display: flex;
		flex-direction: column;

		.image-box {
			padding: 0 10px 10px;
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			overflow: hidden;

			.image-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 100%;
				overflow: hidden;
				border: 1px solid #0acffe;
				border-radius: 10px;
				margin: 0 10px;
				padding: 5px;
				padding-bottom: 10px;

				.t {
					display: flex;
					justify-content: space-between;
					margin-bottom: 0;
					// flex: 1;
					flex-shrink: 0;
					height: 47%;
					margin-bottom: 10px;

					.image {
						width: 55%;
						height: 100%;

						.el-image {
							border-radius: 16px;
						}
					}

					.text {
						flex: 1;
						display: flex;
						flex-direction: column;
						padding: 0 20px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.h1 {
							font-weight: 500;
							color: #0acffe;
							font-family: AlibabaPuHuiTi-2-85-Bold;
						}

						.label {
							float: left;
						}

						.value {
							float: right;
						}
					}
				}

				.b {
					height: 53%;
					flex-shrink: 0;
					display: flex;
					flex-wrap: wrap;

					.item-span {
						width: 50%;
						padding: 0 10px;

						.key {
							float: left;
						}

						.value {
							float: right;
						}
					}
				}
			}
		}
	}
}

.svg-class {
	width: 1.5rem;
	height: 1.5rem;
}

.form-area-wrap {
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	position: relative;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

:deep(.dv-border-box-11-title[fill]) {
	font-size: 22px;
	fill: #98e9f4 !important; // 更换颜色
}

.score-box-wrap {
	font-size: 14px;
	width: 100%;

	& > div {
		width: 100%;
		margin-bottom: 15px;
	}

	& > div:last-child {
		margin-bottom: 0;
	}

	.score-box-btn {
		text-align: right;
	}
}
</style>
